<template>
  <layout title="lazyLoad懒加载">
    <view class="container tn-flex-center-between tn-flex-wrap">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="item"
      >
        <tn-lazy-load :index="index" :src="item" :threshold="-300"></tn-lazy-load>
      </view>
    </view>
    <view class="tn-margin-top">
      <tn-load-more :status="loadStatus"></tn-load-more>
    </view>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnLazyLoad from '@/tuniao-ui/components/tn-lazy-load/src/LazyLoad.vue'
import TnLoadMore from '@/tuniao-ui/components/tn-load-more/src/LoadMore.vue'
import { getRandom } from '@/tuniao-ui/utils'
import { LoadMoreStatus } from '@/tuniao-ui/types'

import { onReachBottom } from '@dcloudio/uni-app'
import { LAZY_LOAD_BOTTOM_EVENT } from '@/tuniao-ui/constants'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 图片数据
const imgData: string[] = [
  'https://tnuiimage.tnkjapp.com/shop/bag1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/bag2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/banner1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/banner2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/banner3.jpg',
  'https://tnuiimage.tnkjapp.com/shop/card.jpg',
  'https://tnuiimage.tnkjapp.com/shop/computer1.jpg',
  'error.jpg',
  'https://tnuiimage.tnkjapp.com/shop/computer2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/content.jpg',
  'https://tnuiimage.tnkjapp.com/shop/cup1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/cup2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/office.jpg',
  'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/pillow.jpg',
  'error.jpg',
  'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
  'https://tnuiimage.tnkjapp.com/shop/watch1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/watch2.jpg',
  'error.jpg'
]

// 列表数据
let list = ref<string[]>([])
// 加载状态
let loadStatus = ref<LoadMoreStatus>('loadmore')

// 默认请求服务器获取数据
const getData = () => {
  loadStatus.value = 'loading'
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(imgData[getRandom(0, imgData.length - 1, true)])
    }
    loadStatus.value = 'loadmore'
  }, 1500);
}
getData()

// 触发底部时触发
onReachBottom(() => {
  getData()
  uni.$emit(LAZY_LOAD_BOTTOM_EVENT)
})
</script>

<style lang="scss" scoped>

.container {
  width: 100%;

  .item {
    width: 48%;
    margin-top: 20rpx;
  }
}
</style>
